<template>
  <div class="container">
    <p-month-picker
      :value="start"
      :allow-clear="allowClear"
      placeholder="开始时间"
      :disabled-date="diabledStartDate"
      :open="StartOpen"
      @change="startChange"
      @blur="$emit('blur')"
      @openChange="startOpenChange"
    />
    <span class="divide">~</span>
    <p-month-picker
      :value="end"
      :allow-clear="allowClear"
      placeholder="结束时间"
      :disabled-date="disabledEndDate"
      :open="endOpen"
      @change="endChange"
      @blur="$emit('blur')"
      @openChange="endOpenChange"
    />
  </div>
</template>

<script>
export default {
  props: {
    allowClear: {
      type: Boolean,
      default: false,
    },
    start: {
      type: Object,
      default: null,
    },
    end: {
      type: Object,
      default: null,
    },
    isEmptyArray: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // start: null,
      // end: null,
      endOpen: false,
      StartOpen: false,
    };
  },
  methods: {
    startOpenChange(open) {
      console.log('open: ', open);
      console.log('this.isEmptyArray: ', this.isEmptyArray);
      if (this.isEmptyArray) {
        this.$confirm('该操作将清空价格变更明细，是否确认？')
          .then(() => {
            this.StartOpen = open;
            if (!open) {
              this.endOpen = true;
            }
            // this.endOpen = true;
            this.$emit('res-is-empty-array');
          })
          .catch(() => {
            // console.log('e: ', e);
          });
      } else {
        // this.endOpen = true;
        if (!open) {
          this.endOpen = true;
        }
        this.StartOpen = open;
      }
    },
    endOpenChange(open) {
      if (this.isEmptyArray) {
        this.$confirm('该操作将清空价格变更明细，是否确认？')
          .then(() => {
            this.endOpen = open;
            this.$emit('res-is-empty-array');
          })
          .catch(() => {
            // console.log('e: ', e);
          });
      } else {
        this.endOpen = open;
      }
    },
    startChange(val) {
      if (val === null) {
        this.$emit('update:end', val);
      }
      this.$emit('update:start', val);
      this.$emit('change', val);
      // this.start = val;
    },
    endChange(val) {
      if (val === null) {
        this.$emit('update:start', val);
      }
      this.$emit('update:end', val);
      this.$emit('change', val);
      // this.end = val;
    },
    diabledStartDate(start) {
      const end = this.end;
      if (!start || !end) return false;
      return start.valueOf() > end.valueOf();
    },
    disabledEndDate(end) {
      const start = this.start;
      if (!start || !end) return false;
      return start.valueOf() >= end.valueOf();
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  align-items: center;
  width: 100%;
  .divide {
    margin: 0 10px;
  }
}
/deep/ .poros-calendar-picker {
  width: 48%;
}
</style>